<template>
  <div class="form-definition-editor-footer">
    <div class="form-definition-editor-view-item" style="border-right: 0" @click="() => change(view)"
         :class="{'form-definition-editor-view-item-selected': innerEditingView === view}"
         v-for="view in formDefinition.views">
      {{ view.viewName }}
    </div>
    <div class="form-definition-editor-view-item"
         style="color: white" @click="addNewView">
      +
    </div>

    <a-modal
        title="添加视图" :visible="visible"
        @ok="handleOk" @cancel="() => visible = false">
      <a-input v-model="viewName" placeholder="请输入视图名称"/>
    </a-modal>
  </div>
</template>
<script>
import {createProps} from "@/utils";
import {createFormDefinition, createView} from "@/components/form/type";

export default {
  name: 'FormDefinitionDesignerFooter',
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    editingView: createProps(Object, () => undefined),
  },
  data() {
    return {
      visible: false,
      viewName: undefined,
    }
  },
  methods: {
    handleOk() {
      if (!this.viewName) return this.$notification.error({message: '请输入视图名称'})

      this.formDefinition.views.push(createView(this.viewName, false));
      this.visible = false;
    },
    change(v) {
      this.$emit("change", v);
    },
    addNewView() {
      this.viewName = undefined;
      this.visible = true;
    },
  },
  computed: {
    innerEditingView() {
      let res = this.editingView
      if (!res) {
        res = this.formDefinition.views.find(v => v.main)
      }
      this.change(res)
      return res;
    },
  }
};
</script>
<style>
.form-definition-editor-footer {
  display: flex;
  background: #272727;
  padding-left: 10px;
}

.form-definition-editor-view-item {
  padding: 3px 10px;
  border: 1px solid #4a4a4a;
  border-top: 0;
  cursor: pointer;
  user-select: none;
  color: #f1f1f1;
}

.form-definition-editor-view-item-selected {
  background: #666666;
  color: #f1f1f1;
}
</style>